<template>
    <div class="Box">
        <div>
            <span>{{ props.season.title }}</span>
        </div>
        <div>
            <span>{{ props.gameStage }}</span>
            <span>已结束</span>
        </div>
        <div class="teamScoreBox">
            <p>
                <img :src="props.awayTeam.logoFull"/>
                <span>{{ props.awayTeam.title }}</span>
            </p>
            <p>
                <span>{{ props.awayScore }}</span>
                <span>:</span>
                <span>{{ props.homeScore }}</span>
            </p>
            <p>
                <img :src="props.homeTeam.logoFull" />
                <span>{{ props.homeTeam.title }}</span>
            </p>
        </div>
        <div>
            <el-button>集锦</el-button>
            <el-button>回放</el-button>
        </div>
    </div> 
</template>

<script lang="ts" setup>
interface Props{
    gameStage:string            //比赛小标题  本场比赛阶段 '季后赛' 
    season:{
        logoFull:string         //比赛大标题前log
        title:string            //比赛大标题
    }
    awayScore:number            //挑战者方得分
    awayTeam:{                  //挑战者方
        logoFull:string         //log
        title:string
    }
    homeScore:number            //被挑战者方得分
    homeTeam:{                  //被挑战者方
        logoFull:string         //log
        title:string
    }
}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.Box{
    width: 100%;
    height: 100%;
    @include flexColumnCenter;
    gap: 10px 0;
    padding: 15px 0;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #E3E5E7;
    & div:nth-child(1){
        color: #18191C;
        font-size: 16px;
        white-space: nowrap;
        font-weight: 600;
    }
    & div:nth-child(2){
        display: flex;
        gap: 10px;
        color: #61666D;
        font-size: 13px;
        white-space: nowrap;
    }
    & div:nth-child(4){
        padding: 0 60px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}
.teamScoreBox{
    width: 100%;
    @include flexRowCenter;
    gap: 25px;
    & p:nth-child(1),p:nth-child(3){
        @include flexColumnCenter;
        font-size:13px;
        font-weight: 600;
        color: #18191C;
        white-space: nowrap;
    }
    & p:nth-child(1) img:nth-child(1){
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    & p:nth-child(3) img:nth-child(1){
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    & p:nth-child(2){
        @include flexRowCenter;
        font-size:32px;
        font-weight: 600;
        gap: 15px;
        color: #18191C;
    }
}
.el-button{
    width: 45%;
    color: #409EFF;
    border: 1px solid #409EFF;
}
</style>